<template>
	<view class="main">
		<view class="header">
			<view class="cont">
				<view class="left">
					<view class="des">当前账户余额(USDT)</view>
					<view class="title">0.00</view>
				</view>
				<view class="right" @click="openSite">
					批量操作
				</view>
			</view>
		</view>
		<view class="search">
			<view class="left">火币</view>
			<u-search placeholder="搜索币种名称" v-model="keyword" :show-action="false" bg-color="#ffffff"></u-search>
		</view>
		<view class="tabNav">
			<view class="item" :class="{active:tabActive==0}" @click="TabClick(0)">
				全部
			</view>
			<view class="item" :class="{active:tabActive==1}" @click="TabClick(1)">
				策略循环
			</view>
			<view class="item" :class="{active:tabActive==2}" @click="TabClick(2)">
				单次策略
			</view>
			<view class="item" :class="{active:tabActive==3}" @click="TabClick(3)">
				停止补单
			</view>
		</view>
		<view class="content">
			<view class="item" @click="ToPage('/pages/Transaction/detail')">
				<view class="ico active"></view>
				<view class="left">
					<view class="title">
						<text>ETH/USDT</text>
						<text class="tag">策略循环</text>
					</view>
					<view class="cont">
						<text>数量 1.42536</text>
						<text>浮亏</text>
						<text>+0.1923</text>
					</view>
				</view>
				<view class="right">
					+2.13
				</view>
			</view>
			<view class="item" @click="ToPage('/pages/Transaction/detail')">
				<view class="ico"></view>
				<view class="left">
					<view class="title">
						<text>ETH/USDT</text>
						<text class="tag">策略循环</text>
					</view>
					<view class="cont">
						<text>数量 1.42536</text>
						<text>浮亏</text>
						<text class="red">+0.1923</text>
					</view>
				</view>
				<view class="right red">
					+2.13
				</view>
			</view>
			<view class="item" @click="ToPage('/pages/Transaction/detail')">
				<view class="ico"></view>
				<view class="left">
					<view class="title">
						<text>ETH/USDT</text>
						<text class="tag">策略循环</text>
					</view>
					<view class="cont">
						<text>数量 1.42536</text>
						<text>浮亏</text>
						<text>+0.1923</text>
					</view>
				</view>
				<view class="right">
					+2.13
				</view>
			</view>
			
		</view>
		
		<Nav :current='navActive'></Nav>
		<u-popup v-model="show" mode="bottom" border-radius="16" height="30%">
			<view class="site">
				<view class="title">
					仅针对已经勾选的所有币种进行操作
				</view>
				<view class="cont">
					<view class="item">
						<view class="ico"></view>
						<view class="title">策略循环/单次策略</view>
					</view>
					<view class="item" @click="ToPage('/pages/Transaction/site')">
						<view class="ico"></view>
						<view class="title">交易设置</view>
					</view>
					<view class="item" @click="openClear">
						<view class="ico"></view>
						<view class="title">清仓卖出</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-modal v-model="clear" title="清仓卖出" show-cancel-button content="按照当前的价格，卖出所有资产，确定清仓吗？"></u-modal>
	</view>
</template>

<script>
	import Nav from '../../component/Nav.vue'
	export default {
		components:{
			Nav
		},
		data() {
			return {
				socket:null,
				navActive:1,
				show:false,//是否展示批量操作弹窗
				clear:false,//清仓卖出
				tabActive:0,//当前选项
				keyword:'',//搜索关键字
				list:[]
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		methods: {
			
			// 点击清仓
			openClear(){
				this.clear = true
			},
			// 点击批量操作
			openSite(){
				this.show = true
			},
			// 切换导航
			TabClick(e){
				this.tabActive = e
			},
			// 跳转页面
			ToPage(url,data=''){
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.main{
		.header{
			background-color: #2F73FD;
			
			.cont{
				padding: 50rpx 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.left{
					.des{
						font-size: 34rpx;
						font-family: $G-fm;
						font-weight: 400;
						color: #A8C6FF;
						line-height: 35rpx;
					}
					.title{
						font-size: 44rpx;
						font-family: $G-t-fm;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 56rpx;
						margin-top: 18rpx;
					}
				}
				
				.right{
					width: 200rpx;
					height: 68rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					font-size: 28rpx;
					font-family: $G-fm;
					font-weight: 400;
					color: #131415;
					line-height: 68rpx;
					text-align: center;
				}
			}
		}
		.search{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 28rpx;
			background-color: $G-bg-color;
			position: sticky;
			left: 0;
			top:0rpx;
			.left{
				font-size: 24rpx;
				font-family: $G-fm;
				font-weight: 600;
				color: #222222;
				line-height: 34rpx;
				position: relative;
			}
			.left:after{
				content:'';
				width:0;
				border: 10rpx solid transparent;
				border-top-color: #222222;
				position: absolute;
				right: -26rpx;
				top:calc(50% - 5rpx);
			}
			.u-search{
				height: 56rpx;
				margin-left: 50rpx!important;
				/deep/.u-content{
					height: 56rpx!important;
					border-radius: 28rpx!important;
				}
			}
		}
		.tabNav{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 34rpx;
			background-color: #FFFFFF;
			border-bottom: 2rpx solid #F8F8F8;
			position: sticky;
			left: 0;
			top:80rpx;
			.item{
				padding: 14rpx 0;
				font-size: 24rpx;
				font-family: $G-fm;
				font-weight: 600;
				color: #000000;
				line-height: 34rpx;
				position: relative;
				border-bottom: 2rpx solid #F8F8F8;
			}
			.item.active{
				color: #2F73FD;
			}
			.item.active:after{
				content: '';
				width: 40rpx;
				height: 6rpx;
				background: #2F73FD;
				border-radius: 3rpx;
				position: absolute;
				left: calc(50% - 20rpx);
				bottom: 0;
			}
		}
		.content{
			background-color: #FFFFFF;
			padding: 0 28rpx;
			.item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0rpx 28rpx 0rpx;
				border-bottom: 2rpx solid #F5F5F5;
				.ico{
					width: 32rpx;
					height: 32rpx;
					border: 1px solid #999999;
					border-radius: 50%;
				}
				.ico.active{
					background: url(../../static/images/ico/xz.png)center center no-repeat;
					background-size: 100%;
					border: 0;
				}
				.left{
					width: calc(100% - 220rpx);
					.title{
						margin-bottom: 10rpx;
						text{
							font-size: 28rpx;
							font-family: $G-t-fm;
							font-weight: 600;
							color: #000000;
							line-height: 40rpx;
						}
						.tag{
							font-size: 20rpx;
							font-family: $G-fm;
							font-weight: 400;
							color: #0066EC;
							line-height: 28rpx;
							padding: 2rpx 12rpx;
							background: rgba(47, 115, 253, 0.1);
							border-radius: 6rpx;
							margin-left: 10rpx;
						}
					}
					.cont{
						text{
							font-size: 24rpx;
							font-family: $G-fm;
							font-weight: 400;
							color: #000000;
							line-height: 34rpx;
						}
						text:first-child{
							margin-right: 18rpx;
						}
						text:nth-child(3){
							color: #04AD8F;
						}
						text:nth-child(3).red{
							color: #D04C64;
						}
					}
				}
				.right{
					padding: 12rpx 40rpx;
					background: #01BF9A;
					border-radius: 6rpx;
					font-size: 24rpx;
					font-family: $G-fm;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 34rpx;
				}
				.right.red{
					background: #E4516C;
				}
			}
		}
		
		.site{
			padding: 28rpx 36rpx;
			.title{
				padding-left: 10rpx;
				font-size: 28rpx;
				font-family: $G-fm;
				font-weight: 600;
				color: #000000;
				line-height: 40rpx;
				position: relative;
			}
			>.title:after{
				content: '';
				width: 6rpx;
				height: 28rpx;
				background: #2F80ED;
				border-radius: 3rpx;
				position: absolute;
				left: 0;
				top:calc(50% - 14rpx)
			}
			.cont{
				padding: 38rpx 0 0 0;
				display: flex;
				justify-content: space-between;
				.item{
					width: 33.33%;
					text-align: center;
					.ico{
						width: 106rpx;
						height: 106rpx;
						margin: 0 auto;
						box-shadow: 0px 0px 8px 0px rgba(194, 192, 192, 0.5);
						border-radius: 6px;
						background: #FFFFFF url(../../static/images/ico/tran_ico2.png)center center no-repeat;
						background-size: 42rpx;
					}
					.title{
						margin-top: 12rpx;
						font-size: 24rpx;
						font-family: $G-fm;
						font-weight: 400;
						color: #000000;
						line-height: 34rpx;
						padding-left: 0;
					}
				}
				.item:nth-child(2){
					.ico{
						background: #FFFFFF url(../../static/images/ico/tran_ico1.png)center center no-repeat;
						background-size: 42rpx;
					}
				}
				.item:nth-child(3){
					.ico{
						background: #FFFFFF url(../../static/images/ico/tran_ico3.png)center center no-repeat;
						background-size: 42rpx;
					}
				}
			}
		}
	}
</style>
